<!--
 * Created by sf
 * 2019/12/5
 -->

<template>
  <div id="ranking-board">
    <div class="ranking-board-title">功能使用占比</div>

    <el-row
      :gutter="24"
      type="flex"
      justify="start"
      align="middle">
      <el-col :span="12">
        <dv-active-ring-chart
          :config="config"
          style="width:250px;height:300px" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    rawData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      config: {
        data: this.rawData
      }
    }
  }
}
</script>

<style lang="less">
  #ranking-board {
    box-shadow: 0 0 3px blue;
    background-color: rgba(6, 30, 93, 0.5);
    border-top: 2px solid rgba(1, 153, 209, .5);
    box-sizing: border-box;
    padding: 0px 30px;

    .ranking-board-title {
      font-weight: bold;
      height: 30px;
      display: flex;
      align-items: center;
      font-size: 20px;
    }

  }
</style>
